<template>
    <div>
        <x-header :left-options="{backText: ''}">报名</x-header>

        <group title="填写报名信息">
            <x-input :max="11" :min="11" title="" is-type="china-mobile"
                     placeholder="手机号码" v-model="phone" required></x-input>
        </group>
        <group title="报名活动需填写手机号，你的手机号仅组织者可见">
            <x-textarea :max="30" placeholder="听说自我介绍写的好，会备受期待。"
                        v-model="introduction"></x-textarea>
        </group>
        <toast v-model="show" type="text">提交报名成功~</toast>
        <toast v-model="show1" type="warn">{{msg}}</toast>
        <box gap="12px 12px">
            <x-button type="primary" @click.native="confirm">提交报名</x-button>
        </box>
    </div>
</template>

<script>
    import {
        XInput, Group, XButton, XHeader, ToastPlugin, Confirm,
        XTextarea, Divider, Toast, Box
    } from 'vux'
    import request from 'superagent'

    export default {
        components: {
            XInput,
            XButton,
            Group,
            XHeader,
            XTextarea,
            Divider,
            Toast,
            Box,
            ToastPlugin,
            Confirm
        },
        data () {
            return {
                show: false,
                show1: false,
                phone: '',
                introduction: '',
                actId: '',
                validate: false,
                msg: ''
            }
        },
        created: function () {
            this.actId = this.$route.query.actId;
        },
        methods: {
            confirm(){
                const _this = this;
                if (this.phone.length == 11) {
                    this.$vux.confirm.show({
                        // 组件除show外的属性
                        title: '提示',
                        content: '确认加入？',
                        onCancel () {
                            this.$vux.confirm.hide()
                        },
                        onConfirm () {
                            _this.submit();
                        }
                    })
                } else {
                    this.msg = '请填写正确的手机号'
                    this.show1 = true
                    console.log('手机号不对')
                }
            },
            submit () {
                request.post('/wx/activity/joinactivity')
                    .send({
                        actId: this.actId,
                        introduce: this.introduction,
                        phone: this.phone
                    }).set('Content-Type', 'application/x-www-form-urlencoded')
                    .end((err, res) => {
                        console.log(res);
                        let data = JSON.parse(res.text);
                        if (res.ok && data.code != 1) {
                            console.log(data.code)
                            this.show = true;
                            setTimeout(() => {
                                this.reload();
                            }, 500);
                        } else {
                            this.msg = data.resMsg;
                            this.show1 = true;
                            setTimeout(() => {
                                this.reload();
                            }, 500);
                        }
                    });
            },
            reload() {
                this.$router.push({path: 'seek'});
            }
        }
    }

</script>
<style scoped>
    .weui_cell_ft .weui_btn {
        margin-left: 5px;
        vertical-align: middle;
        display: inline-block;
    }

    .red {
        color: red;
    }

    .black {
        color: #000000;
    }

    .green {
        color: green;
    }

</style>
